<template>
  <a-page bg="/statics/map.jpg" searchDisabled>
    <div class="row justify-center">
      <div class="q-my-xl border-radius-3 col-xl-4 col-lg-4 col-md-6 q-pa-md bg-white">
        <div><h1 class="size-24">重设密码</h1></div>
        <q-input
          float-label="注册邮箱/手机"
          v-model="user"
          clearable></q-input>
        <q-input
          v-model="verifyCode"
          float-label="验证码"
          class="q-mt-md"
          clearable>
          <q-btn
            :disabled="!type && timer"
            dense
            class="button-dense"
            :label="timer ? countdown+'秒后可以重新发送' : '获取验证码'"
            @click="sendCode"
            style="padding-top: 0!important;padding-bottom: 0!important;"/>
        </q-input>
        <q-input
          v-model="password"
          float-label="新密码"
          type="password"
          class="q-mt-md full-width"
          name="new-password"></q-input>
        <q-input
          v-model="rePassword"
          float-label="重复输入新密码"
          type="password"
          class="q-mt-md full-width"
          name="new-password"></q-input>
        <div class="justify-center row q-mt-sm">
          <q-btn :disabled="$v.resetGroup.$invalid" color="primary" class="q-my-md full-width" @click="resetPassword">重设密码</q-btn>
        </div>
        <div class="row q-mt-md">
          <a href="/about/">
            <q-btn color="primary" dense flat label="联系我们"/>
          </a>
        </div>
      </div>
    </div>
  </a-page>
</template>

<script>
  import { required, minLength, maxLength, sameAs } from 'vuelidate/lib/validators'
  import LoginNav from './nav/login'
  import { timerMixin } from '../mixins'

  export default {
    name: 'PageReset',
    components: { LoginNav },
    mixins: [timerMixin],
    data () {
      return {
        user: '',
        password: '',
        rePassword: '',
        verifyCode: ''
      }
    },
    validations: {
      user: {
        required, minLength: minLength(8), maxLength: maxLength(32)
      },
      password: {
        required, minLength: minLength(8), maxLength: maxLength(16)
      },
      rePassword: {
        required, minLength: minLength(8), maxLength: maxLength(16), sameAsPassword: sameAs('password')
      },
      verifyCode: {
        required, minLength: minLength(6), maxLength: maxLength(6)
      },
      resetGroup: ['user', 'password', 'rePassword', 'rePassword']
    },
    computed: {
      type () {
        let type = null

        if (this.user.match(/^\d{11}$/)) {
          type = 'phone'
        } else if (this.user.match(/^.+@.+\.[A-z]{2,8}$/)) {
          type = 'email'
        }

        return type
      }
    },
    methods: {
      async sendCode () {
        if (this.timer) {
          return null
        }
        this.startTimer()

        let reqData = {}

        if (!this.type) {
          return null
        } else if (this.type === 'phone') {
          reqData.phone = this.user
        } else if (this.type === 'email') {
          reqData.email = this.user
        }

        const { status, data } = await this.postRequest({
          api: '/api/user/findpwd_code/',
          data: reqData
        })

        const typeCH = this.type === 'phone' ? '手机' : '邮箱'

        if (status === 200) {
          this.notify('success', `已向你的注册${typeCH}发送验证码`)
          this.startTimer()
        } else {
          this.notify('error', data.detail)
        }
      },
      async resetPassword () {
        const reqData = {
          password: this.password,
          code: this.verifyCode
        }

        if (this.type === 'phone') {
          reqData.phone = this.user
        } else if (this.type === 'email') {
          reqData.email = this.user
        }

        const { status, data } = await this.postRequest({
          api: '/api/user/findpwd/',
          data: reqData
        })

        this.passwordModal = false

        if (status === 200) {
          this.notify('success', '重设密码成功，请妥善保管你的密码')
          this.$router.push('/login/')
        } else {
          this.notify('error', data.detail)
        }
      }
    }
  }
</script>

<style lang="stylus">

</style>
